﻿<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Njam Njam Mobile</title>
    <link href="@Url.Content("~/Content/jquery.mobile-1.0.1.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/mobile.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/NjamNjam.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.mobile-1.0.1.min.js")" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.map.full.min.js")" type="text/javascript"></script>
    
</head>
<body>
    <!-- ============ Home page ================== -->
    <section id="homePage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Njam Njam Mobile</h1>
        </header>
        <div data-role="content">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <a href="#vrstePonudePage">
                        <img src="@Url.Content("~/Content/images/hamburger-icon.png")" alt="Ponuda" />
                        <span class="icon-label">Ponuda</span>
                    </a>
                </div>
                <div class="ui-block-b">
                    <a href="#vrsteRestoranaPage">
                        <img src="@Url.Content("~/Content/images/restaurant-blue-icon.png")" alt="Restorani" />
                        <span class="icon-label">Restorani</span>
                    </a>
                </div>
                <div class="ui-block-a">
                    <a href="#podesavanjaPage">
                        <img src="@Url.Content("~/Content/images/settings-icon.png")" alt="Podešavanja" />
                        <span class="icon-label">Podešavanja</span>
                    </a>
                </div>
            </div>
        </div>
        <footer data-role="footer" data-position="fixed"></footer>
    </section>
    <!-- ============ End Home page ================== -->
    
    <!-- ============ Vrste restorana page ============= -->
    <section id="vrsteRestoranaPage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Vrste restorana</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <ul data-role="listview">
            </ul>
        </div>
    </section>
    <!-- ============ End Vrste restorana page ============= -->

    <!-- ============ Restorani ============= -->
    <section id="restoraniPage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Restorani</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <ul data-role="listview">
            </ul>
        </div>
    </section>
    <!-- ============ End Restorani ============= -->

     <!-- ============ Restoran ============= -->
    <section id="restoranPage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Detalji restorana</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <img id="slikaRestorana" src="" alt="" width="140px"/>
            <div>
                <h1 class="caption" id="nazivRestorana"></h1>
                <p id="vrstaRestorana"></p>
                <p id="adresaRestorana"></p>
                <p id="mestoRestorana"></p>
                <p id="telefonRestorana"></p>
            </div>
            <br/>
            <p id="opisRestorana"></p>
        </div>
         <footer data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a id="meniRestorana" href="#ponudaRestoranaPage">Ponuda</a></li>
                    <li><a id="pozicijaRestorana" href="#mapaPage">Mapa</a></li>
                    <li><a id="pozoviRestoran" href="#">Pozovi</a></li>
                    <li><a id="ruta" href="#">Kako stići</a><li>
                </ul>
            </div>
        </footer>
    </section>
    <!-- ============ End Restoran ============= -->

     <!-- ============ Vrste ponude page ============= -->
    <section id="vrstePonudePage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Ponuda</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <ul data-role="listview">
            </ul>
        </div>
    </section>
    <!-- ============ End Vrste ponude page ============= -->

    <!-- ============ Ponuda ============= -->
    <section id="ponudaPage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Ponuda</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <ul data-role="listview">
            </ul>
        </div>
    </section>
    <!-- ============ End Ponuda ============= -->

    <!-- ============ Ponuda restorana ============= -->
    <section id="ponudaRestoranaPage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Ponuda restorana</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <ul data-role="listview">
            </ul>
        </div>
    </section>
    <!-- ============ End Ponuda restorana ============= -->

    <!-- ============ Mapa =================== -->
    <section id="mapaPage" data-role="page" data-fullscreen="true">
        <header data-role="header" data-position="fixed">
            <h1>Mapa</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <div id="mapa"></div>
        </div>
        
    </section>
    <!-- ============ End Mapa =================== -->

     <!-- ============ Lista restorana =================== -->
    <section id="listaRestoranaPage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Lista restorana</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <ul data-role="listview">
                <li>
                    <a href="#">
                        <img alt="Slika" src=""/>
                        <p>Naziv restorana</p>
                        <p>Adresa</p>
                        <p>Mesto</p>
                    </a>
                </li>
            </ul>
        </div>
        <footer data-position="fixed">
           
        </footer>
    </section>
    <!-- ============ End Lista restorana =================== -->

    <!-- ============ Podešavanja ============= -->
    <section id="podesavanjaPage" data-role="page">
        <header data-role="header" data-position="fixed">
            <h1>Podešavanja</h1>
            <a href="#homePage" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
        </header>
        <div data-role="content">
            <label for="txtAdresa">Vaša adresa:</label>
            <input type="search" id="txtAdresa" placeholder="Vaša trenutna adresa, mesto..." />
            <button data-inline="true" id="btnPretrazi">Pretraži</button>
            <label for="txtLat">Latituda:</label>
            <input type="number" id="txtLat" placeholder="Latituda" />
            <label for="txtLon" class="podesavanjaInput">Longituda:</label>
            <input type="number" id="txtLon" placeholder="Longituda" />
            <label for="txtDist" class="podesavanjaInput">Udaljenost:</label>
            <input type="number" id="txtDist" placeholder="Razdaljina (m)" value="500" />
        </div>
        <footer data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a id="btnOsveziPoziciju" href="#" data-icon="refresh"></a></li>
                </ul>
            </div>
        </footer>
    </section>
    <!-- ============ End Ponuda restorana ============= -->

    <section id="vrstaPrikazaDialog" data-role="dialog">
        <header data-role="header">
            <h1>Izaberite prikaz</h1>
        </header>
        <div data-role="content">
            <a href="#listaRestoranaPage" data-role="button">Lista</a>
            <a href="#mapaPage" data-role="button">Mapa</a>
        </div>
    </section>

    <section id="pretragaAdreseDialog" data-role="dialog">
        <header data-role="header"><h1>Izaberite Vašu adresu</h1></header>
        <div data-role="content">
            <ul id="listaAdresa" data-role="listview"></ul>
        </div>
        <footer data-role="footer"></footer>
    </section>

    <script>
        function pretraziAdresu() {
            var adresa = $("#txtAdresa").val().trim();
            if (adresa === "") {
                alert("Unesite adresu");
                return;
            }
            $("#mapa").gmap('search', { 'address': adresa }, function(results, status) {
                var ul = $("#listaAdresa");
                ul.empty();
                if (status === 'OK') {
                    if (results.length == 1) {
                        $("#txtLat").val(results[0].geometry.location.lat());
                        $("#txtLon").val(results[0].geometry.location.lng());
                        alert("Vaša pozicija je ažurirana");
                        return;
                    }
                    $.mobile.changePage("#pretragaAdreseDialog");
                    $.each(results, function(ix, address) {
                        var item = '<li><a href="#podesavanjaPage" data-lat=' + address.geometry.location.lat() + ' data-lon=' + address.geometry.location.lng() + '>' + address.formatted_address + '</a></li>';
                        ul.append(item);
                    });
                    ul.listview("refresh");
                    $("#listaAdresa a").click(function() {
                        var selected = $(this);
                        $("#txtLat").val(selected.data("lat"));
                        $("#txtLon").val(selected.data("lon"));
                        $('.ui-dialog').dialog('close');
                        return false;
                    });
                }
            });
        }

        function neuspesnaDetekcijaPozicije() {
            alert("Detekcija Vaše pozicije neuspešna. Podesite Vašu poziciju u podešavanjima");
        }

        function unesiPoziciju(position) {
            $("#txtLat").val(position.coords.latitude);
            $("#txtLon").val(position.coords.longitude);
        }
        
        function mojaPozicija() {
            var lat = $("#txtLat").val();
            var lon = $("#txtLon").val();
            if (lat != undefined && lon != undefined && lat != 0 && lon != 0) {
                return new google.maps.LatLng(lat, lon);
            } else {
                return undefined;
            }
        }

        function prikaziMene() {
            if (mojaPozicija() != undefined) {
                $("#mapa").gmap('addMarker', { 'position': mojaPozicija(), 
                                               'icon': '/NjamNjam/Content/images/profile.png'});
            }
        }
        
        function pozicionirajMe() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(unesiPoziciju, neuspesnaDetekcijaPozicije);
            } else {
                neuspesnaDetekcijaPozicije();
            }
        }
                
        $(document).ready(function () {
            
            pozicionirajMe();
            
            $("#vrsteRestoranaPage").bind('pageshow', function () {
                var mojaPozicijaLat = $("#txtLat").val().trim();
                var mojaPozicijaLon = $("#txtLon").val().trim();
                var razdaljina = $("#txtDist").val().trim();
                $.mobile.showPageLoadingMsg();
                $.get('@Url.Action("VratiVrsteRestorana")', {'latituda' : mojaPozicijaLat, 
                                                             'longituda': mojaPozicijaLon, 
                                                             'dist' : razdaljina}, function (data, status) {
                    if (status === "success") {
                        var $list = $("#vrsteRestoranaPage ul");
                        $list.empty();
                        $list.append(data);
                        $list.listview("refresh");
                        $("#vrsteRestoranaPage li a").click(function () {
                            var id = $(this).data("id");
                            $("#restoraniPage").data("id", id);
                            $("#restoraniPage header h1").text($(this).text());
                        });
                    } else {
                        alert(status);
                    }
                    $.mobile.hidePageLoadingMsg();
                });
            });

            $("#restoraniPage").bind('pageshow', function () {
                var mojaPozicijaLat = $("#txtLat").val().trim();
                var mojaPozicijaLon = $("#txtLon").val().trim();
                var razdaljina = $("#txtDist").val().trim();
                $.mobile.showPageLoadingMsg();
                var id = $("#restoraniPage").data("id");
                $.get("@Url.Action("VratiRestoraneTipa")", { id: id, 
                                                             'latituda': mojaPozicijaLat, 
                                                             'longituda': mojaPozicijaLon, 
                                                             'dist': razdaljina }, function (data, status) {
                    var $list = $("#restoraniPage ul");
                    $list.empty();
                    $list.append(data);
                    $list.listview("refresh");
                    $("#restoraniPage li a").click(function() {
                        $("#restoranPage").data("id", $(this).data("id"));
                    });
                    $.mobile.hidePageLoadingMsg();
                });
            });

            $("#vrstePonudePage").bind('pageshow', function () {
                $.mobile.showPageLoadingMsg();
                var mojaPozicijaLat = $("#txtLat").val().trim();
                var mojaPozicijaLon = $("#txtLon").val().trim();
                var razdaljina = $("#txtDist").val().trim();
                
                $.get('@Url.Action("VratiVrstePonude")', {'latituda' : mojaPozicijaLat, 
                                                          'longituda': mojaPozicijaLon, 
                                                          'dist': razdaljina}, function (data, status) {
                    var $list = $("#vrstePonudePage ul");
                    $list.empty();
                    $list.append(data);
                    $list.listview("refresh");
                    $("#vrstePonudePage li a").click(function () {
                        var id = $(this).data("id");
                        $("#ponudaPage").data("id", id);
                        $("#ponudaPage header h1").text($(this).text());
                    });
                    $.mobile.hidePageLoadingMsg();
                });
            });

            $("#ponudaPage").bind('pageshow', function () {
                $.mobile.showPageLoadingMsg();
                var id = $("#ponudaPage").data("id");
                var mojaPozicijaLat = $("#txtLat").val().trim();
                var mojaPozicijaLon = $("#txtLon").val().trim();
                var razdaljina = $("#txtDist").val().trim();
                $.get("@Url.Action("VratiPonuduPoVrsti")", { 'id': id, 
                                                             'latituda': mojaPozicijaLat, 
                                                             'longituda': mojaPozicijaLon, 
                                                             'dist': razdaljina }, function (data, status) {
                    var $list = $("#ponudaPage ul");
                    $list.empty();
                    $list.append(data);
                    $list.listview("refresh");
                    $("#ponudaPage ul a").click(function() {
                        var idPonude = $(this).data("id");
                        $("#mapaPage").data("id_ponude", idPonude)
                                      .data("latituda", 0)
                                      .data("longituda", 0);
                        $("#mapaPage header h1").text($(this).data("naziv"));
                        $("#listaRestoranaPage").data("id_ponude", idPonude);
                        $("#listaRestoranaPage header h1").text($(this).data("naziv"));
                    });
                    $.mobile.hidePageLoadingMsg();
                });
            });

            $("#mapaPage").bind('pageshow', function() {
                var idPonude = $(this).data("id_ponude");
                var latituda = $(this).data("latituda");
                var longituda = $(this).data("longituda");
                
                if (idPonude != undefined && idPonude > 0) {
                    $.mobile.showPageLoadingMsg();
                    var mojaPozicijaLat = $("#txtLat").val().trim();
                    var mojaPozicijaLon = $("#txtLon").val().trim();
                    var razdaljina = $("#txtDist").val().trim();
                    $.get("@Url.Action("UcitajRestoraneZaIzabranuPonudu")", {'id': idPonude, 
                                                                             'latituda': mojaPozicijaLat, 
                                                                             'longituda': mojaPozicijaLon, 
                                                                             'dist': razdaljina}, function(data, status){
                        $("#mapa").gmap('clear', 'markers');
                        $.each(data, function(ix, item){
                            $("#mapa").gmap('addMarker', 
                                { 'id': item.Id, 
                                  'position': new google.maps.LatLng(item.Latituda, item.Longituda), 
                                  'bounds':true,
                                  'icon': '/NjamNjam/Content/images/hamburger32.png'
                                }).click(function () {
                                    $("#restoranPage").data("id", item.Id);
                                    $.mobile.changePage("#restoranPage");
                                });
                        });
                        prikaziMene();
                        $.mobile.hidePageLoadingMsg();
                    });
                }
                if (latituda != undefined && longituda != undefined && latituda != 0 && longituda != 0) {
                    $("#mapa").gmap('clear', 'markers');
                    $("#mapa").gmap('addMarker', 
                                { 'position': new google.maps.LatLng(latituda, longituda), 
                                  'bounds':true,
                                  'icon': '/NjamNjam/Content/images/hamburger32.png'
                                });
                    prikaziMene();
                }
                
            });

            $("#listaRestoranaPage").bind('pageshow', function() {
                var $ul = $("#listaRestoranaPage ul");
                var idPonude = $(this).data("id_ponude");
                if (idPonude > 0) {
                    $.mobile.showPageLoadingMsg();
                    var mojaPozicijaLat = $("#txtLat").val().trim();
                    var mojaPozicijaLon = $("#txtLon").val().trim();
                    var razdaljina = $("#txtDist").val().trim();
                    $.get("@Url.Action("PrikaziRestoraneZaIzabranuPonudu")", {'id': idPonude,
                        'latituda': mojaPozicijaLat,
                        'longituda': mojaPozicijaLon,
                        'dist': razdaljina}, function(data, status) {
                            $ul.empty();
                            $ul.append(data);
                            $ul.listview('refresh');
                            $("#listaRestoranaPage ul a").click(function() {
                                var link = $(this);
                                var id = link.data("id");
                                $("#restoranPage").data("id", id);
                            });
                            $.mobile.hidePageLoadingMsg();
                        }
                    );
                }});

                $("#restoranPage").bind('pageshow', function() {
                var id = $(this).data("id");
                $.mobile.showPageLoadingMsg();
                $.get("@Url.Action("UcitajRestoran")", { 'id': id }, function(data, status) {
                    //$("#restoranPage header h1").text(data.Naziv);
                    $("#slikaRestorana").attr("src", "/NjamNjam/Images/Restorani/" + data.Id + ".png").attr("alt", data.Naziv);
                    $("#nazivRestorana").text(data.Naziv);
                    $("#vrstaRestorana").text(data.VrstaRestorana != null ? data.VrstaRestorana.Naziv : null);
                    $("#adresaRestorana").text(data.Adresa);
                    $("#mestoRestorana").text(data.Mesto);
                    $("#telefonRestorana").text("tel: " + data.BrojTelefona);
                    $("#opisRestorana").text(data.KratakOpis);
                    $("#pozoviRestoran").attr("href", "tel:" + data.BrojTelefona);
                    $("#pozicijaRestorana").data("naziv_restorana", data.Naziv)
                                           .data("latituda", data.Latituda)
                                           .data("longituda", data.Longituda);
                    $("#ponudaRestoranaPage").data("id", data.Id);
                    $.mobile.hidePageLoadingMsg();
                });
            });
            $("#pozicijaRestorana").click(function() {
                $("#mapaPage header h1").text($(this).data("naziv_restorana"));
                $("#mapaPage").data("id_ponude", 0).data("latituda", $(this)
                    .data("latituda"))
                    .data("longituda", $(this).data("longituda"));
            });

            $("#ponudaRestoranaPage").bind('pageshow', function() {
                $.mobile.showPageLoadingMsg();
                var id = $(this).data("id");
                $.get("@Url.Action("VratiPonuduRestorana")", { 'id': id }, function(view, status) {
                    var list = $("#ponudaRestoranaPage ul");
                    list.empty();
                    list.append(view);
                    list.listview("refresh");
                    $.mobile.hidePageLoadingMsg();
                });
            });

            $("#btnPretrazi").click(pretraziAdresu);

            $("#btnOsveziPoziciju").click(function() {
                pozicionirajMe();
                return false;
            });
            
    });
    </script>
</body>
</html>
